<script lang="ts" setup>
import { deleteCardAPI, getCardListAPI } from '@/apis/card';
import router from '@/router';
import type { Card, CardListParams } from '@/types/card';
import { ElMessage, ElMessageBox } from 'element-plus';
import path from 'path-browserify';
import { ref } from 'vue';

// 请求参数
const params = ref<CardListParams>({
  page: 1,
  pageSize: 10,
  cardStatus: '-1', // 状态  '-1' 全部 '0':可用，'1':已过期
  carNumber: '', // 车牌号
  personName: '' // 车主姓名
})

// 月卡管理列表
const cardList = ref<Card[]>([])
// 总数
const total = ref(0)

// 获取月卡状态
const formatterStatus = (row: Card) => row.cardStatus === 0 ?'可用' : '已过期'
// 获取月卡列表
const getCardList = async() => {
  const res = await getCardListAPI(params.value)
  console.log(res.data)
  cardList.value = res.data.rows
  total.value = res.data.total
}
getCardList()

// 月卡状态列表
const carStatusList = [
  { 
    id: '-1', // 全部
    label: '全部'
   }, {
    id: '0', // 可用
    label: '可用'
   }, {
    id: '1', // 已过期
    label: '已过期'
   }
]

// 页码切换  每页10条 / 20条
const handleSizeChange = (size: number) => {
 params.value.pageSize = size
 getCardList()
}

// 页数切换 第几页

const handleCurrentChange = (page: number) => {
 params.value.page = page 
 getCardList()
}

// 搜索
const search = () => {
  params.value.page = 1 
  getCardList()
}
// 编辑
const edit = (id:number) => { 
  console.log(id)
  router.push({
    path:`/carAdd`,
    query: { 
      id 
    }
  
})
  
}
const daleteCardList= ref<Card[]>([])
const handleSelectionChange =(val:any)=>{
  daleteCardList.value=val
}
const deleteAll = async()=>{
ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
}).then(async () => { 
  // 确认删除
  if(daleteCardList.value.length===0){
    return ElMessage.warning('请选择要删除的月卡信息')
  }
  // 发送请求
  await deleteCardAPI(daleteCardList.value.map(item => item.id))
    // 提示用户
    ElMessage.success('删除成功')
    // 重新获取列表
    getCardList()
})
.catch(()=>{ })
}
</script>

<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">车主姓名：</span>
      <el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">状态：</span>
      <el-select style="width: 240px" v-model="params.cardStatus">
          <!-- 全部 可用 已过期 -->
          <el-option v-for="item in carStatusList" :key="item.id" :label="item.label" :value="item.id" />
      </el-select>
      <el-button type="primary" @click="search" class="search-btn">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/carAdd')">添加月卡</el-button>
      <el-button @click="deleteAll">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="cardList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" label="序号" width="100" />
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <!-- <el-table-column label="状态" prop="cardStatus" >
          <template #default="scope">
            <span v-if="scope.row.cardStatus === 0">可用</span>
            <span v-else>已过期</span>
          </template>
        </el-table-column> -->
        <el-table-column label="状态" prop="cardStatus" :formatter="formatterStatus" />
        <el-table-column align="center" label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button size="small" type="text">续费</el-button>
            <el-button size="small" type="text">查看</el-button>
            <el-button size="small" type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="text" @click="delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 --> 
    <div class="page-container" style="margin-right: 10px; float: right;">
      <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      :total="total" layout="total, prev, pager, next, sizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>